/*
 * @Author: peng.chen2 peng.chen2@rt-mart.com
 * @Date: 2025-07-26 10:00:00
 * @LastEditors: peng.chen2
 * @LastEditTime: 2025-08-01 15:42:34
 * @FilePath: /rt-monitoring/src/components/ThemeToggle.tsx
 * @Description: 主题切换按钮组件
 */

import React from 'react'
import { Button, Tooltip } from 'antd'
import { SunOutlined, MoonOutlined } from '@ant-design/icons'
import { useTheme } from '../contexts/ThemeContext'
import { themeColors } from '../config/antd'

const ThemeToggle: React.FC = () => {
  const { isDark, toggleTheme } = useTheme()

  return (
    <div className="text-text-primary">
      {isDark ? <MoonOutlined /> : <SunOutlined />}
    </div>
    // <Tooltip title={isDark ? '切换到亮色模式' : '切换到暗色模式'}>
    //   <Button
    //     type="text"
    //     icon={isDark ? <SunOutlined /> : <MoonOutlined />}
    //     onClick={toggleTheme}
    //     className="text-text-primary"
    //     style={{
    //       border: `1px solid ${themeColors.borderPrimary}`,
    //       background: 'rgba(0, 149, 255, 0.1)',
    //       borderRadius: 6,
    //       transition: 'all 0.3s ease',
    //     }}
    //     onMouseEnter={(e) => {
    //       e.currentTarget.style.background = 'rgba(0, 149, 255, 0.2)'
    //       e.currentTarget.style.borderColor = themeColors.primary
    //     }}
    //     onMouseLeave={(e) => {
    //       e.currentTarget.style.background = 'rgba(0, 149, 255, 0.1)'
    //       e.currentTarget.style.borderColor = themeColors.borderPrimary
    //     }}
    //   />
    // </Tooltip>
  )
}

export default ThemeToggle
